これからはじめるGulp #23：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る

Gulp - Solo Advent Calendar 2014

#JavaScript

#gulp.js

#Sketch

野中龍一

2014.12.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

前回のこれからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化でSVGアイコンからアイコンフォントを自動生成する方法を試しました。今回は前回の記事をベースにgulp-consolidateを使ったアイコン一覧を確認できるHTMLを作ってみます。

この記事はSymbols for Sketchを参考にしています。

gulp-consolidateについて

gulp-consolidateはLo-Dashやswig等のテンプレートエンジンをGulpから使えるようにするプラグインです。対応しているテンプレートエンジンはこちらに記載されています。

デザインファイル

デザインファイルは前回の記事のアイコンデータをそのまま利用します。

design

テンプレートファイル

今回、時間短縮のためにSymbols for Sketchのソースにあるfont-awesome styleのテンプレートをそのまま使おうと思います。ローカルにダウンロードしてgulpプロジェクトの中に配置します。

モジュール・プラグインのインストール

必要なモジュール・プラグインをインストールします。

Lo-Dash

今回利用するテンプレートエンジンLo-Dashをインストールします。Lo-Dashはnode.jsのモジュールです。

$ sudo npm install lodash --save-dev
Password:
lodash@2.4.1 node_modules/lodash
</span></pre>

<h3>gulp-rename</h3>

<p>gulp-renameはテンプレートから生成するHTMLの名前を変更するために利用します。</p>


$ sudo npm install gulp-rename --save-dev
Password:
gulp-rename@1.2.0 node_modules/gulp-rename

gulp-consolidate

$ sudo npm install gulp-consolidate --save-dev
gulp-consolidate@0.1.2 node_modules/gulp-consolidate
├── map-stream@0.0.4
└── consolidate@0.10.0

iconfontタスクにgulp-consolidateを組み込む

前回のiconfontタスクをベースに.on('codepoints', function(codepoints, options) {...}の中にgulp-consolidateプラグインを使ったHTMLとCSSを作るStreamを用意します。

      var engine             = 'lodash';
      var templatePath       = 'templates/';
      var templateName       = 'fontawesome-style';
      var consolidateOptions = {
        glyphs: codepoints,
        fontName: fontName,
        fontPath: '../assets/fonts/' + fontName + '/',
        className: 's'
      };

      //css
      gulp.src(templatePath + templateName + '.css')
        .pipe(consolidate(engine, consolidateOptions))
        .pipe(rename({ basename:fontName }))
        .pipe(gulp.dest('assets/css/'));

      //html
      gulp.src(templatePath + templateName + '.html')
        .pipe(consolidate(engine, consolidateOptions))
        .pipe(rename({ basename:'sample' }))
        .pipe(gulp.dest('assets/'));

全体はこのようになります。

var gulp        = require('gulp');
var rename      = require("gulp-rename");
var sketch      = require('gulp-sketch');
var iconfont    = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');

var paths = {
  srcDir : 'assets/_design',
  dstDir : 'assets/fonts',
}

gulp.task('iconfont', function(){
  var fontName = 'arrow-font';
  var srcGlob  = paths.srcDir + '/icons.sketch';
  var dstGlob  = paths.dstDir + '/' + fontName;

  var sketchOptions = {
    export : 'artboards',
    compact: true,
    formats: 'svg'
  }
  var fontOptions = {
    fontName         : fontName
  }

  gulp.src( srcGlob )
    .pipe(sketch( sketchOptions ))
    .pipe(iconfont( fontOptions ))
    .on('codepoints', function(codepoints, options) {
      var engine             = 'lodash';
      var templatePath       = 'templates/';
      var templateName       = 'fontawesome-style';
      var consolidateOptions = {
        glyphs: codepoints,
        fontName: fontName,
        fontPath: '../assets/fonts/' + fontName + '/',
        className: 's'
      };

      //css
      gulp.src(templatePath + templateName + '.css')
        .pipe(consolidate(engine, consolidateOptions))
        .pipe(rename({ basename:fontName }))
        .pipe(gulp.dest('assets/css/'));

      //html
      gulp.src(templatePath + templateName + '.html')
        .pipe(consolidate(engine, consolidateOptions))
        .pipe(rename({ basename:'sample' }))
        .pipe(gulp.dest('assets/'));
    })
    .pipe(gulp.dest( dstGlob ));
});

タスクの実行

実行結果はこれだけですが、assetsディレクトリの中にLo-Dashで処理されたCSSとHTMLが作られているはずです。

$ gulp iconfont
[20:33:30] Using gulpfile ~/Projects/Labs/iconfont.gulp/gulpfile.js
[20:33:30] Starting 'iconfont'...
[20:33:30] Finished 'iconfont' after 11 ms
[20:33:30] gulp-svgicons2svgfont: Font created

assetsディレクトリの構造はこのようになっています。

assets
├── _design
│   └── icons.sketch
├── css
│   └── arrow-font.css
├── fonts
│   └── arrow-font
│       ├── arrow-font.eot
│       ├── arrow-font.svg
│       ├── arrow-font.ttf
│       └── arrow-font.woff
└── sample.html

assetsディレクトリの中にあるsample.htmlがシンボル一覧のHTMLです。これをブラウザで開くと以下のようにアイコン一覧が表示されます。

テンプレートをカスタマイズすることで好みの一覧表を作ることができます。

アイコンを使うには

テンプレートで作られたCSSは以下のようになっています。このCSSをHTMLに読み込みます。

@font-face {
  font-family: "arrow-font";
  src: url('../assets/fonts/arrow-font/arrow-font.eot');
  src: url('../assets/fonts/arrow-font/arrow-font.eot?#iefix') format('eot'),
    url('../assets/fonts/arrow-font/arrow-font.woff') format('woff'),
    url('../assets/fonts/arrow-font/arrow-font.ttf') format('truetype'),
    url('../assets/fonts/arrow-font/arrow-font.svg#arrow-font') format('svg');
  font-weight: normal;
  font-style: normal;
}

.s:before {
  display: inline-block;
  font-family: "arrow-font";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.s-lg {
  font-size: 1.3333333333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.s-2x { font-size: 2em; }
.s-3x { font-size: 3em; }
.s-4x { font-size: 4em; }
.s-5x { font-size: 5em; }
.s-fw {
  width: 1.2857142857142858em;
  text-align: center;
}

.s-arrow-bottom:before { content: "\E001" }
.s-arrow-left:before { content: "\E002" }
.s-arrow-right:before { content: "\E003" }
.s-arrow-top:before { content: "\E004" }

HTMLで利用するには下記のようにクラスを指定します。

<span class="s s-arrow-bottom"></span>

Lo-Dashを使ったテンプレートについて

テンプレートのHTML/CSSを見てみるとgulp.jsのタスク内で定義したconsolidateOptions変数の中身を<%= xxxxx %>で参照できるようです。ちょっとしたHTMLやCSSを作る際に便利ですね。今回はCSSでしたが、少しテンプレートを調整すればSCSSで使えそうです。Lo-Dashを使ったHTMLテンプレートも難しくはなさそうですね。Lo-dashのドキュメントはこちらです。

<html>
  <head>
    <title><%= fontName %></title>
    <link href="css/<%= fontName %>.css" rel="stylesheet">
    <style>
      body { font-family: Gill Sans; text-align: center; background: #f7f7f7 }
      body > h1 { color: #666; margin: 1em 0 }
      .glyph { padding: 0 }
      .glyph > li { display: inline-block; margin: .3em .2em; width: 5em; height: 6.5em; background: #fff; border-radius: .5em; position: relative }
      .glyph > li .s { display: block; margin-top: .1em; line-height: 0 }
      .glyph-name { font-size: .8em; color: #666; display: block }
      .glyph-codepoint { color: #999; font-family: monospace }
    </style>
  </head>
...

このプラグインのおかげで自前のアイコンフォントも手軽に作ることができ、配布するのも現実的になります。今回はここまでです。明日は定番ですがgulp-spritesmithを使ったSprite画像作成について試してみたいと思います。

この記事はこれからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作るの転載です。